<template>
	<div>
		<div style="margin-top: 10px;display: flex;justify-content: center">
			<el-input prefix-icon="el-icon-search" v-model="keywords"
			          placeholder="通过用户用搜索用户..."
			          @keydown.enter.native="doSearch"
			          style="width: 400px;margin-right: 10px"></el-input>
			<el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button>
			<el-button icon="el-icon-plus" type="primary" @click="doAddAdmin">新增</el-button>
		</div>
		<div class="admin-container">
			<el-card class="box-card" v-for="(admin,index) in admins" :key="index" v-loading="loading">
				<div slot="header" class="clearfix">
					<span>{{ admin.name }}</span>
					<el-button style="float: right; padding: 3px 0;color: red" type="text"
					           icon="el-icon-delete" @click="deleteHr(hr)"></el-button>
				</div>
				<div>
					<div style="width: 100%;display: flex;justify-content: center">
						<img :src="admin.userface" :alt="admin.name" :title="admin.name" class="img-userface">
					</div>
					<div class="userinfo-container">
						<div>用户名: {{ admin.username }}</div>
						<div>手机号码: {{ admin.phone }}</div>
						<div>地址: {{ admin.address }}</div>
						<div>用户状态:
							<el-switch
									v-model="admin.enabled"
									active-color="#13ce66"
									inactive-color="#ff4949"
									active-text="启用"
									inactive-text="禁用"
									@change="enabledChange(admin)">
							</el-switch>
						</div>
						<div>
							用户角色:
							<el-tag style="margin-right: 4px" type="success" v-for="(role,indexj) in admin.roles"
							        :key="indexj">{{ role.nameZh }}
							</el-tag>
							<el-popover
									placement="right"
									title="角色列表"
									width="200"
									trigger="click"
									@hide="hidePop(admin)"
									@show="showPop(admin)"
							>
								<el-select multiple v-model="selectedRoles" placeholder="请选择">
									<el-option
											v-for="(role,indexk) in allRoles"
											:key="indexk"
											:label="role.nameZh"
											:value="role.id">
									</el-option>
								</el-select>
								<el-button slot="reference" type="text" icon="el-icon-more"></el-button>
							</el-popover>
						</div>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import {deleteRequest, getRequest, putRequest} from "@/utils/api";

export default {
	name: "SysAdmin",
	data() {
		return {
			loading:false,
			keywords: '',
			admins: [],
			selectedRoles: [],
			allRoles: []
		}
	},
	mounted() {
		this.initAdmins();
	},
	methods: {
		deleteHr(admin){
			this.$confirm('此操作将永久删除该操作员, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				deleteRequest("/system/admin/"+admin.id).then(resp=>{
					if(resp){
						this.initAdmins();
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});

		},
		doSearch() {
			this.initAdmins();
		},
		hidePop(admin) {
			let roles = admin.roles;
			let rolesArr = [];
			roles.forEach(r => {
				rolesArr.push(r.id)
			})
			if (rolesArr.sort().toString() !== this.selectedRoles.sort().toString()) {
				let url = '/system/admin/role' + '?adminId=' + admin.id;
				this.selectedRoles.forEach(rid => {
					url += '&rids=' + rid;
				})
				putRequest(url).then(resp => {
					if(resp){
						this.initAdmins();
					}
				})
			}


		},
		showPop(admin) {
			this.initAllRoles();
			let roles = admin.roles;
			this.selectedRoles = [];
			roles.forEach(r => {
				this.selectedRoles.push(r.id)
			})
		},
		initAllRoles() {
			getRequest("/system/admin/roles").then(resp => {
				if (resp) {
					this.allRoles = resp
				}
			})
		},
		enabledChange(admin) {
			delete admin.roles
			delete admin.authorities
			putRequest("/system/admin/",admin).then(resp => {
				if (resp) {
					this.initAdmins();
				}
			})
		},
		initAdmins() {
			this.loading = true;
			getRequest("/system/admin/?keywords=" + this.keywords).then(resp => {
				this.loading = false;
				if (resp) {
					this.admins = resp;
				}
			})
		},
		doAddAdmin(){

		}
	}
}
</script>

<style>
.userinfo-container div {
	font-size: 12px;
	color: #409EFF;
}

.userinfo-container {
	margin-top: 20px;

}

.admin-container {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.box-card {
	width: 350px;
	margin-bottom: 20px;
}

.img-userface {
	width: 72px;
	height: 72px;
	border-radius: 72px;
}
</style>
